<template>
  <div class="Echarts">
    <div class="guage">
      <div id="myGuage1"></div>
      <div id="myGuage2"></div>
      <div id="myGuage3"></div>
      <div id="myGuage4"></div>
      <div id="myGuage5"></div>
    </div>
    <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
    <div id="myChart2" :style="{width: '100%', height: '500px'}"></div>
    <div id="myChart3" :style="{width: '100%', height: '500px'}"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data () {
    return {
      hello: 'hello'
    }
  },
  mounted () {
    this.drawLine()
    this.drawLine2()
    this.drawLine3()
    this.drawGuage1()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表
      myChart.setOption({
        title: {
          text: '历史耗能2019'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'pie'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['A组电流', 'B组电流', 'C组电流']
        },
        xAxis: [
          {
            type: 'category',
            data: ['8-15', '8-16', '8-17', '8-18', '8-19', '8-20'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '2019年',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: 'A组电流',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
          },
          {
            name: 'B组电流',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
          },
          {
            name: 'C组电流',
            type: 'bar',
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          }
        ]
      })
    },
    drawLine2 () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart2'))

      // 绘制图表
      myChart.setOption({
        title: {
          text: '历史耗能2019'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'pie'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['A组电流', 'B组电流', 'C组电流']
        },
        xAxis: [
          {
            type: 'category',
            data: ['8-15', '8-16', '8-17', '8-18', '8-19', '8-20'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '2019年',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: 'A组电流',
            type: 'line',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
          },
          {
            name: 'B组电流',
            type: 'line',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
          },
          {
            name: 'C组电流',
            type: 'line',
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          }
        ]
      })
    },
    drawLine3 () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart3'))

      // 绘制图表
      myChart.setOption({
        title: {
          text: '历史耗能'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['A组电流', 'B组电流', 'C组电流']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['8-15', '8-16', '8-17', '8-18', '8-19', '8-20']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'A组电流',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
          },
          {
            name: 'B组电流',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
          },
          {
            name: 'C组电流',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          }
        ]
      })
    },
    drawGuage1 () {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById('myGuage1'))
      let myChart2 = this.$echarts.init(document.getElementById('myGuage2'))
      let myChart3 = this.$echarts.init(document.getElementById('myGuage3'))
      let myChart4 = this.$echarts.init(document.getElementById('myGuage4'))
      let myChart5 = this.$echarts.init(document.getElementById('myGuage5'))
      // 绘制图表
      var option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 15
              }
            },
            data: [{ value: 50 }]

          }
        ]
      }
      myChart1.setOption(option, true)
      myChart2.setOption(option, true)
      myChart3.setOption(option, true)
      myChart4.setOption(option, true)
      myChart5.setOption(option, true)
      setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart1.setOption(option, true)
      }, 2000)
      setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart2.setOption(option, true)
      }, 2000)

      setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart3.setOption(option, true)
      }, 2000)
      setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart4.setOption(option, true)
      }, 2000)
      setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart5.setOption(option, true)
      }, 2000)
    }
  }
}
</script>

<style scoped>
.guage {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 300px;
  margin-bottom: 50px;
}
.guage div {
  width: 300px;
  height: 300px;
}
</style>
